<template>
  <div class="result">
    <div class="head-bar">
      <p class="result-title">
        运单总数（{{
          filterTableData ? filterTableData.length : "-"
        }}）条，仅支持前10000条数据的显示
        <span class="tip-warning"
          >（查询结果涉及用户隐私，请遵照已签署的保密协议约束谨慎使用。）</span
        >
      </p>
      <div class="filter-columns">
        <el-dropdown size="small" trigger="click" :hide-on-click="false">
          <el-button size="small" type="primary">
            显示内容选择<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <div class="checkAll-wrapper">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
            </div>
            <el-checkbox-group
              v-model="checkedColumnList"
              @change="handleCheckedColumnChange"
            >
              <el-dropdown-item
                v-for="item in resultFormColumnList"
                :key="item.prop"
              >
                <el-checkbox
                  :label="item.prop"
                  :disabled="item.disabled ? true : false"
                  >{{ item.label }}</el-checkbox
                >
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- <div class="b-submit export" @click="exportResult">导出运单</div> -->
    </div>
    <div class="waybill_result_table">
      <div class="tableLoading" v-if="tableLoading">
        <i class="el-icon-loading"></i>
      </div>
      <el-table
        :data="tableData"
        max-height="250"
        border
        style="width: 100%; border: 1px solid #1c1d2f"
        @row-dblclick="showSurface"
        v-if="isShowTable"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <template v-for="(column, index) in tableColumnList">
          <el-table-column
            align="center"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
          ></el-table-column>
        </template>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[10, 30, 50, 100, 500, 1000]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="
        filterTableData ? (filterTableData.length > 10000 ? 10000 : filterTableData.length) : 0
      "
    ></el-pagination>
  </div>
</template>
<script>
import {
  resultFormList,
  resultFormLabel,
  resultFormProp,
} from "../assets/js/config";
export default {
  name:'resultTable',
  props:['filterTableData'],
  data() {
    return {
      tableData:[],
      checkAll: true,
      isIndeterminate: false,
      checkedColumnList: resultFormList.map((item) => item.prop),
      resultFormColumnList: resultFormList,
      tableColumnList: resultFormList,
      tableLoading: false,// 
      filterState: false, // 筛选状态
      isShowTable: true,
      pageNum: 1,
      pageSize: 10,
    };
  },
  watch:{
    filterTableData(){
      this.handleSizeChange(this.pageSize)
    }
  },
  created(){
    // this.handleSizeChange(this.pageSize)
  },
  methods: {
    async handleCheckAllChange(val) {
      this.tableLoading = true;
      let tableColumnList = resultFormList || [];
      this.checkAll = val;
      if (val) {
        this.isIndeterminate = false;
        this.tableColumnList = tableColumnList;
        this.checkedColumnList = tableColumnList.map((item) => item.prop);
      } else {
        tableColumnList = tableColumnList.filter((item) => !!item.disabled);
        this.tableColumnList = tableColumnList;
        this.checkedColumnList = tableColumnList.map((item) => item.prop);
        if (tableColumnList.length) {
          this.isIndeterminate = true;
        } else {
          this.isIndeterminate = false;
        }
      }
      if (this.checkedColumnList.length > 2) {
        setTimeout(() => {
          this.tableLoading = false;
        }, 400);
      } else {
        this.tableLoading = false;
      }
    },
    handleCheckedColumnChange(arr) {
      let tableColumnList = resultFormList;
      tableColumnList = tableColumnList.filter((item) =>
        arr.includes(item.prop)
      );
      let totalCount = resultFormList.length;
      let checkedCount = arr.length;

      this.checkAll = checkedCount === totalCount;
      this.isIndeterminate = checkedCount > 0 && checkedCount < totalCount;
      this.tableColumnList = tableColumnList;
      
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.handleCurrentChange(this.pageNum)
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.currentChangePage(this.filterTableData,pageNum)
    },
    currentChangePage(list,pageNum){
      let from = (pageNum - 1) * this.pageSize;
      let to = pageNum * this.pageSize;
      this.tableData = [];
      console.log(list);
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
      this.tableLoading = false;
    },
    TableCellStyle(row, column, rowIndex, columnIndex) {
      if (!row.columnIndex) {
        return "background-color:  #1c1d2f";
      } else {
        if (row.columnIndex < 11) {
          return "background-color:  #1c1d2f";
        } else {
          return null;
        }
      }
    },
    //排序
    // orderChange({ column, prop, order }) {
    //   console.log(column);
    //   console.log(prop);
    //   console.log(order);
    // },
    showSurface(row){
        this.$emit("showSurface",row)
    }
  },
};
</script>
<style lang="scss" scoped>
.checkAll-wrapper {
  padding: 0 15px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dark-style {
  .tableLoading {
    background-color: rgba(34, 35, 54, 0.7);
  }
  .checkAll-wrapper {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
}
.el-checkbox-group {
  max-height: 300px;
  overflow-y: auto;
}
.result {
  padding: 15px;
  &.dark-style {
    background-color: #222336;
  }
  .result-title {
    flex: 1;
    text-align: left;
    color: #8182a5;
    line-height: 48px;
    .tip-warning {
      color: #ff4d4f;
    }
  }
  /deep/.el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
      // background-color: red;
    }
    &::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0) !important;
    }
  }
}
</style>

<style lang="scss" scoped>
.head-bar {
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #28293e;
  .export {
    margin-left: auto;
    width: 90px;
  }
}

.cell-phone {
  color: #4d62ee;
  cursor: pointer;
  text-decoration: underline;
}
.dark-style {
  /deep/.el-table {
    background-color: #222336;
  }
  .cell-phone {
    color: #04c9fe;
  }
  /deep/.el-loading-mask {
    background-color: rgba(34, 35, 54, 0.7);
  }
}
.el-dropdown-menu {
  // max-height: 300px;
  // background-color: #28293E;
  // overflow-y: auto;
  padding: 10px 0;
  .el-dropdown-menu__item {
    height: 32px;
    line-height: 32px;
  }
}
/deep/.el-table th {
  background-color: #222336;
  font-size: 12px;
  border-bottom: none;
  color: #8182a5;
}
/deep/.el-table {
  background-color: #32354d;
  color: #8182a5;
  border-bottom: none;
}
/deep/.el-table th.is-leaf,
.el-table td {
  border-bottom: 0.5px solid #222336;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: 0.5px solid #222336;
}
/deep/.el-table--border th,
.el-table--border td {
  border-right: 0.5px solid #222336;
}
/deep/.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 0.5px solid #222336;
}
/deep/.el-table::before {
  display: none;
}
/deep/.el-table--group::after,
.el-table--border::after {
  display: none;
}
/deep/.el-dropdown-menu {
  background-color: #222336;
}
</style>
